<script setup>
import {reactive} from "vue";
import {useRouter} from "vue-router";

let router = useRouter();
let list = reactive([
  {
    name: "首页",
    path: "/"
  },
  {
    name: "下拉框",
    path: '/select'
  },
  {
    name: "滚动监听",
    path : '/window'
  }
])

const path = (path) => {
  router.push(path)
}
</script>

<template>
  <!--	<starry-sky :stars-count="1000" :distance="1000" />-->
  <div class="view">
    <div class="left">
      <div class="itemList">
        <div class="item" v-for="(item,index) in list" :key="index" @click="path(item.path)">{{ item.name }}</div>
      </div>
    </div>
    <div class="right">
      <RouterView/>
    </div>
  </div>
</template>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.view {
  display: flex;
  height: 100vh;

  .left {
    width: 250px;
    height: 100%;
    background-color: rgba(0, 0, 0, .05);

    .itemList {
      overflow: auto;

      .item {
        padding: 15px 20px;
        cursor: pointer;
        user-select: none;

        &:hover {
          background-color: rgba(0, 0, 0, .1);
        }
      }
    }
  }

  .right {
    width: calc(100% - 250px);
    padding: 10px;
    overflow: auto;
  }
}
</style>
